import { noop } from 'utils/fn'
import { RendererElement } from 'vue'
export interface IColumn<RecordType, Key extends keyof RecordType> {
  label: string
  key: Key
  width?: string | number
  render?: (value: any, record: RecordType, index?: number) => string | RendererElement
}

export interface IProps<RecordType> {
  data: RecordType[]
  columns: IColumn<RecordType, keyof RecordType>[]
  onDoubleClick?: (item: RecordType) => void
  isRecordRowDisabled?: (record: RecordType) => boolean
}

interface ScopeSlot<RecordType> {
  row: RecordType
  column: Object
  $index: number
}

function Table<RecordType extends Record<string, any> = any>({ data, columns, onDoubleClick = noop }: IProps<RecordType>) {
  return (
    <>
      <el-table data={data} style="width: 100%" stripe empty-text="暂无数据" highlight-current-row onRowDblclick={onDoubleClick}>
        {/* <el-table-column type="index" width="50"></el-table-column> */}
        {columns?.map((item, index) => {
          const disabled = false
          return (
            <el-table-column
              key={item.key}
              prop={item.key}
              label={item.label}
              width={item?.width}
              show-overflow-tooltip
              v-slots={{
                default: ({ row, column, $index }: ScopeSlot<RecordType>) => {
                  return item.render ? item.render(row[item.key], row, $index) : <span>{row[item.key]}</span>
                },
              }}
            ></el-table-column>
          )
        })}
      </el-table>
    </>
  )
}

export default Table
